<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#86909C',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#165DFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
            .btn-hover {
                @apply transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg;
            }
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-primary/10 to-secondary/10 p-4">
    <div class="w-full max-w-md">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="bg-primary p-6 text-white">
                <h1 class="text-2xl font-bold text-center">在线考试系统</h1>
                <p class="text-center mt-2 opacity-90">请登录您的账户</p>
            </div>
            <div class="p-6">
                <form id="login-form" class="space-y-4">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-user"></i>
                                </span>
                            <input type="text" id="username" name="username" class="form-input pl-10" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                            <input type="password" id="password" name="password" class="form-input pl-10" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码?</a>
                    </div>
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] flex items-center justify-center gap-2 btn-hover">
                        <i class="fa fa-sign-in-alt"></i>
                        <span>登录</span>
                    </button>
                </form>
            </div>
        </div>
        <p class="mt-4 text-center text-gray-600">
            还没有账户? <a href="#" class="text-primary hover:text-primary/80">联系管理员</a>
        </p>
    </div>
</div>

<script>
    // 登录表单提交
    document.getElementById('login-form').addEventListener('submit', function(e) {
        e.preventDefault();

        // 获取用户名，根据用户名判断角色
        const username = document.getElementById('username').value;

        // 模拟登录成功，根据用户名跳转到不同角色的首页
        if (username) {
            if (username.startsWith('teacher')) {
                window.location.href = 'teacher.html';
            } else if (username.startsWith('admin')) {
                window.location.href = 'admin.html';
            } else if (username.startsWith('student')) {
                window.location.href = 'student.html';
            } else {
                alert('未知用户类型，请重新登录');
            }
        } else {
            alert('请输入用户名和密码');
        }
    });
</script>
</body>
</html>